import Errors from "../../components/Errors";
import { Button } from "antd";
import {
  articleFiledUpdate,
  articleAddTag,
  articleRemoveTag,
  onUnload,
  articleResult,
  ArticleBySlugResult,
} from "../../store/module/articleSlice";
import { useSelector, useDispatch } from "react-redux";
import request from "../../request";
import { useNavigate, useParams } from "react-router-dom";
import { useEffect } from "react";

function ArticleNew() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { title, description, body, tag, tags, errors, slug } = useSelector(
    (state) => {
      return state.article;
    }
  );

  const watchEnter = (e) => {
    if (e.keyCode === 13) {
      e.preventDefault();
      dispatch(articleAddTag());
    }
  };

  const removeTag = (tag) => {
    return () => {
      dispatch(articleRemoveTag(tag));
    };
  };

  const onSubmitForm = async (article) => {
    try {
      const result = await request.article.update(article);
      if (result.status === 1) {
        const { slug } = result.data;
        navigate(`/article/${slug}`);
      } else {
        dispatch(articleResult(result.message));
      }
    } catch (error) {
      dispatch(articleResult(String(error)));
    }
  };
  const { slug: routerSlug } = useParams();
  const getArticleBySlug = async (routerSlug) => {
    try {
      const result = await request.article.get(routerSlug);
      if (result.status === 1) {
        dispatch(ArticleBySlugResult(result.data));
      } else {
        dispatch(ArticleBySlugResult(result.message));
      }
    } catch (error) {
      dispatch(ArticleBySlugResult(String(error)));
    }
  };

  useEffect(() => {
    getArticleBySlug(routerSlug);
    return () => {
      dispatch(onUnload());
    };
  }, []);
  return (
    <div className="editor-page">
      <div className="container page">
        <div className="row">
          <div className="col-md-6 offset-md-3 col-xs-12">
            <h1>编辑文章</h1>
            <Errors errors={errors} />
            <form>
              <fieldset className="form-group">
                <input
                  type="text"
                  className="form-control form-control-lg"
                  placeholder="文章标题"
                  value={title || ""}
                  onChange={(e) => {
                    dispatch(
                      articleFiledUpdate({
                        key: "title",
                        value: e.target.value,
                      })
                    );
                  }}
                />
              </fieldset>
              <fieldset className="form-group">
                <input
                  type="text"
                  className="form-control form-control-lg"
                  placeholder="文章描述"
                  value={description || ""}
                  onChange={(e) => {
                    dispatch(
                      articleFiledUpdate({
                        key: "description",
                        value: e.target.value,
                      })
                    );
                  }}
                />
              </fieldset>
              <fieldset className="form-group">
                <textarea
                  rows="12"
                  className="form-control form-control-lg"
                  placeholder="使用markdown编辑文章"
                  value={body || ""}
                  onChange={(e) => {
                    dispatch(
                      articleFiledUpdate({ key: "body", value: e.target.value })
                    );
                  }}
                />
              </fieldset>
              <fieldset className="form-group">
                <input
                  type="text"
                  className="form-control form-control-lg"
                  placeholder="请输入标签"
                  onKeyUp={watchEnter}
                  value={tag || ""}
                  onChange={(e) => {
                    dispatch(
                      articleFiledUpdate({ key: "tag", value: e.target.value })
                    );
                  }}
                />
                {tags.map((tag) => {
                  return (
                    <span key={tag} className="tag-default tag-pill">
                      {tag}{" "}
                      <i
                        onClick={removeTag(tag)}
                        className="iconfont icon-denglong"
                      />
                    </span>
                  );
                })}
              </fieldset>
              <fieldset>
                <Button
                  onClick={() => {
                    onSubmitForm({ title, description, body, tags, slug });
                  }}
                  htmlType="button"
                  size="large"
                  color="primary"
                  variant="outlined"
                >
                  修改文章
                </Button>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  );
}

export default ArticleNew;
